<template>
	<view class="goods_detail">
		<swiper indicator-dots indicator-active-color="red" @change="changeItem">
			<swiper-item v-for="(item,index) in details" :key="index">
				<image :src="item.image"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>￥{{info.salePrice}}</text>
				<text>￥{{info.price}}</text>
			</view>
			<view class="goods_name">{{info.title}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>货号：{{info.id}}</view>
			<view>库存：{{info.stock}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="tit">详情介绍</view>
			<view class="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<view class="goods_nav">
			<uni-goods-nav :fill="true"  :options="options" :button-group="buttonGroup"  @click="onClick" @buttonClick="buttonClick" ></uni-goods-nav>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				id: 0,
				// userInfo:null,
				details: [],
				info: {}, //当前商品的详细信息
				content: '',
				current:0,
				options: [
					{
						// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						icon:'/static/kefu.png',
						text: '客服'
					}, {
						// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
						icon:'/static/dianpu.png',
						text: '店铺'
					}, {
						// icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
						icon:'/static/carts.png',
						text: '购物车',
						info: 0
					},
				],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		computed:{
			...mapState('userAbout',['userInfo']),
			...mapState('cartAbout',['cartInfo'])
		},
		methods: {
			...mapActions('cartAbout',{setCart:'setCart'}),
			async getProducts () {
				const res = await this.$myRequest({
					url: '/api/product/content/'+this.id
				})
				this.details=res.data.data.details
				// console.log('details:',res.data)
				this.getDetails()
			},
			getDetails(){
				this.info = this.details[this.current]
				this.content = this.details[this.current].name
				// console.log('aaa',this.info)
			},
			onClick (e) {
				console.log(e.content.text)
			},
			async buttonClick (e) {
				//先判断用户是否登录，如果没有登录则不能添加购物车
				if(!this.userInfo.id){
					uni.showToast({
						title:'请先登录',
						duration:1500,
						success() {
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/member/member'
								})
							},1500)
						}
					})
					return
				}
				if(e.index==0){
					const res=await this.$myRequest({
						method:'POST',
						url:'/api/cart/add',
						data:{
							quantity:1,
							productId:this.info.productId,
							detailId:this.info.id,
							userId:this.userInfo.id
						}
					})
					console.log('res:',res)
					if(res.data.code==200){
						uni.showToast({
							title:'添加成功',
							duration:1000
						})
					}
					const resp=await this.$myRequest({
						method:'POST',
						url:'/api/cart/isExist',
						data:{
							quantity:1,
							productId:this.info.productId,
							detailId:this.info.id,
							userId:this.userInfo.id
						}
					})
					console.log("resp",resp)
					//添加购物车成功，同时判断该商品是否是同一个商品购买多件，如果购买多件同一商品，角标不重复累加
					if(res.data.code==200 && resp.data.data.quantity<=1){
						this.options[2].info++;
						this.setCart(this.options[2].info)
					}
				}
			},
			changeItem(event){
				this.current=event.detail.current
				this.getDetails()
			}
		},
		//
		mounted() {
			//判断用户是否登录，未登录用户可以查看商品详情，但是购物车不显示角标，只有登录用户才会显示
			if(this.userInfo.id){
				this.options[2].info=this.cartInfo.goodsCount
			}
		},
		onLoad (options) {
			this.id = options.id
			this.getProducts()
		},
		components: {uniGoodsNav}
	}
</script>

<style lang="scss">
.goods_detail{
	swiper{
		height: 700rpx;
		//此处设置text-align属性是为了让图片居中显示，将image高度减少到90%是因为完全高度会遮挡轮播的圆点
		text-align: center;
		image{
			// width: 100%;
			height: 90%;
		}
	}
	.box1 {
		padding: 10px;
		.price {
			font-size: 35rpx;
			color: $shop-color;
			line-height: 80rpx;
			text:nth-child(2){
				color: #ccc;
				font-size: 28rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}
		.goods_name{
			font-size: 32rpx;
			line-height: 60rpx;
		}
	}
	.box2 {
		padding: 0 10px;
		font-size: 32rpx;
		line-height: 70rpx;
	}
	.box3 {
		padding-bottom: 50px;
		.tit{
			font-size: 32rpx;
			padding-left: 10px;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
		}
		.content {
			padding: 10px;
			font-size: 28rpx;
			color: #333;
			line-height: 50rpx;
		}
	}
}

.goods_nav {
	position: fixed;
	bottom:0;
	width: 100%;
}

.line {
	height: 10rpx;
	width: 750rpx;
	background: #eee;
}
</style>
